<template>
    <!-- 用户详情界面 -->
    <div class="user-detail">
        <h3 class="cll_h3">用户详情</h3>
        <hr>
        <!-- 用户详情 -->
        <div class="table_box">
            <table :model="userDetail">
                <tr>
                    <td>用户id</td>
                    <td>{{ userDetail.id }}</td>
                </tr>
                <tr>
                    <td>用户微信</td>
                    <td>{{ userDetail.wechat }}</td>
                </tr>
                <tr>
                    <td>电话</td>
                    <td>{{ userDetail.phone }}</td>
                </tr>
                <tr>
                    <td>真实姓名</td>
                    <td>{{ userDetail.name }}</td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>{{ userDetail.sex }}</td>
                </tr>
                <tr>
                    <td>收货地址</td>
                    <td>{{ userDetail.address }}</td>
                </tr>
                <tr>
                    <td>生日</td>
                    <td>{{ userDetail.birthday }}</td>
                </tr>
                <tr>
                    <td>身高</td>
                    <td>{{ userDetail.height }}</td>
                </tr>
                <tr>
                    <td>体重</td>
                    <td>{{ userDetail.width }}</td>
                </tr>
                <tr>
                    <td>个人积分</td>
                    <td>{{ userDetail.score }}</td>
                </tr>
                <tr>
                    <td>推荐有礼<br><span>获得奖金</span></td>
                    <td>已开通<br><span>{{ userDetail.money }}元</span></td>
                </tr>
                <tr>
                    <td>注册时间</td>
                    <td>{{ userDetail.regTime }}</td>
                </tr>
            </table>
        </div>

        <!-- 剩余预定次数 -->
        <div class="surplus_box">
            <span>剩余预定次数</span>
            <div class="tableBox">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column fixed prop="name" label="餐名" width="150" align="center" />
                    <el-table-column prop="buyTime" label="购买次数" width="150" align="center" />
                    <el-table-column prop="surplus" label="剩余次数" width="150" align="center" />
                    <el-table-column prop="amend" label="是否修改过次数" width="150" align="center" />
                    <el-table-column prop="adminTime" label="修改次数" width="150" align="center" />
                    <el-table-column prop="adminCouse" label="修改原因" width="150" align="center" />
                    <el-table-column prop="admin" label="操作人" width="150" align="center" />
                    <el-table-column fixed="right" width="120">
                        <template #default>
                            <div class="timeBtn">
                                <el-button link size="small" @click="handleShow">更换次数</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="jumpBtn">
                <el-button link size="large" @click="handleToTR">更改记录</el-button>
            </div>
        </div>

        <!-- 更改次数 -->
        <div class="admin_time" ref="spanRef">
            <div class="box top">更换次数 <span @click="handleHide">x</span></div>
            <hr />
            <div class="box middle"><span>剩余次数</span></div>
            <hr />
            <div class="box bottom">
                男士餐
                <span>11</span>
            </div>
            <hr />
            <el-form :model="form" label-width="120px" label-position="left">
                <el-form-item label="修改次数">
                    <el-select v-model="form.region" placeholder="">
                        <el-option label="增加" value="增加" />
                        <el-option label="减少" value="减少" />
                    </el-select>
                    <el-form-item label="">
                        <el-input v-model="form.number" type="text" placeholder="输入数字" />
                    </el-form-item>
                </el-form-item>
                <hr>
                <el-form-item label="扣除会员卡余额" v-if="form.region == '增加'">
                    <span class="span">{{ form.number * 25 }}元</span>
                </el-form-item>
                <el-form-item label="退回会员卡余额" v-else>
                    <span class="span">{{ form.number * 25 }}元</span>
                </el-form-item>
                <hr>
                <el-form-item label="修改原因">
                    <el-input v-model="form.desc" type="text" size="large" />
                </el-form-item>
                <hr>
                <div class="btn_box">
                    <el-form-item>
                        <el-button text @click="handleOk">确认</el-button>
                        <el-button type="info" @click="handleHide" class="closeBtn">关闭</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>


<script >
// import { defineComponent } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    name: 'userDetail',
    data() {
        return {
            userInfo: {
                tableData: '',
                form: '',
            },
            userDetail: {},
            tableData: [
                {
                    name: '男士餐',
                    buyTime: '13',
                    surplus: '7',
                    amend: '否',
                    adminTime: '无',
                    adminCouse: '无',
                    admin: '无',
                }, {
                    name: '女士餐',
                    buyTime: '8',
                    surplus: '12',
                    amend: '否',
                    adminTime: '无',
                    adminCouse: '无',
                    admin: '无',
                }, {
                    name: '工作餐',
                    buyTime: '5',
                    surplus: '15',
                    amend: '否',
                    adminTime: '无',
                    adminCouse: '无',
                    admin: '无',
                }],
            userInfo: [{

            }],
            form: {
                region: '增加',
                number: '',
                desc: '',
            },
            userDetail: {
                id: '01',
                wechat: 'dabaoSod',
                phone: '18113259874',
                name: '张三',
                sex: '男',
                address: '肖家河大厦',
                birthday: '1988-1-8',
                height: '180cm',
                width: '55kg',
                score: '999',
                money: '560',
                regTime: '2021-1-9'

            }
        }
    },
    methods: {
        // 跳转到更改记录界面
        handleToTR() {
            this.$router.push('/user/timerecord')
        },
        // 打开更改界面
        handleShow() {
            this.$refs.spanRef.style.display = 'block'
        },
        // 隐藏更改次数界面
        handleHide() {
            this.$refs.spanRef.style.display = 'none'
            this.empty()
        },
        handleOk() {
            ElMessageBox.confirm(
                '确认更换次数吗？',
                '注意：',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    ElMessage({
                        type: 'success',
                        message: '修改成功',
                    })
                    this.empty()
                    this.$refs.spanRef.style.display = 'none'
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消成功',
                    })
                })
        },
        empty() {
            this.form.number = ''
            this.form.desc = ''
        }
    },
    created() {
        console.log(this.$route.query)
        this.userDetail = this.$route.query
        console.log(this.userDetail)
    }
}
</script>

<style lang="less" scoped>
.tableBox {
    border: 1px solid #000;
    margin-top: 10px;
}

.user-detail {
    .table_box {
        width: 400px;

        table {
            width: 400px;
            height: 100%;
            font-size: 16px;

            span {
                color: rgb(177, 177, 177);
                font-size: 14px;
            }

            td {
                padding-bottom: 30px;
                width: 200px;
            }

        }
    }

    .surplus_box>span {
        font-size: 16px;
        padding-bottom: 5px;
    }
}

.timeBtn {
    width: 80px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    background-color: rgb(223, 221, 221);

    .el-button.is-link {
        color: black;
    }

}

.jumpBtn {
    margin: 0 0 20px 34px;
    width: 80px;
    height: 40px;
    line-height: 40px;
    background-color: rgb(186, 185, 185);
    margin-top: 20px;
    text-align: center;
}

.admin_time {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 9;
    background: white;
    border: 1px solid black;
    width: 700px;
    height: 400px;
    padding: 0 30px 30px 30px;

    span {
        padding-right: 20px;
        cursor: pointer;
    }

    .box {
        height: 40px;
        line-height: 40px;
    }

    .top {
        font-size: 16px;
        color: rgb(78, 77, 77);
        font-weight: bold;
        position: relative;

        span {
            font-size: 30px;
            color: rgb(149, 148, 148);
            position: absolute;
            top: 0;
            right: 10px;
        }
    }

    .btn_box {
        float: right;

        .closeBtn {
            color: #000;
        }

        .el-button.is-text {
            background: rgb(149, 148, 148);
        }
    }

    .middle>span {
        float: right;
        color: rgb(108, 105, 105);
        font-size: 16px;
    }

    .bottom>span {
        float: right;
        padding-right: 50px;
        color: rgb(108, 105, 105);
    }

    .span {
        display: block;
        width: 100%;
        text-align: end;
        padding-right: 36px;
        color: rgb(108, 105, 105);
    }
}

.el-button.is-link,
.el-button.is-text {
    color: black;
}
</style>
